<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>记账</title>
    <link href="/semantic-ui/semantic.css" rel="stylesheet" type="text/css">
    <script src="/semantic-ui/jquery-3.5.1.js"></script>
    <script src="/semantic-ui/semantic.js"></script>
    <style>
        body, html {
            height: 50%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>

<div class="ui form success" style=" width:800px; margin-top: 50% !important;">
    <form class="ui form" th:action="@{/addledger}" method="POST" th:object="${ledger}">
        <div class="column">
            <div class="ui icon header" style=" width:100%;">
                <i class="edit icon"></i>
                记录账单
            </div>
        </div>

        <div class="field">
            <label>时间</label>
            <input type="date" name="time" placeholder="请输入时间" required th:value="*{time}">
        </div>

        <div class="field">
            <label>收支名称</label>
            <select class="ui dropdown" th:field="*{IEName}">
                <option th:each="ie:${IENames}" th:value="${ie}" th:text="${ie}"></option>
            </select>
        </div>

        <div class="field">
            <label>收支类型</label>
            <div class="inline fields">
                <div class="field">
                    <input id="income" type="radio" name="IorE" value="收入" tabindex="0"/>
                    <label for="income">收入</label>
                </div>
                <div class="field">
                    <input id="expense" type="radio" name="IorE" value="支出" tabindex="0"/>
                    <label for="expense">支出</label>  <!--for：绑定与后面相同的id，点击改标签==点击对应id-->
                </div>
            </div>
            <input type="hidden" name="iore" th:value="*{iorE}"/>
        </div>

        <div class="field">
            <label>金额</label>
            <input type="text" placeholder="请输入金额" name="Money" th:value="${ledger.money!=0 ? ledger.money : ''}">
        </div>

        <div class="field">
            <label>账户</label>
            <select class="ui dropdown" th:field="*{cardBank}">
                <option th:each="ie:${CardBanks}" th:value="${ie}" th:text="${ie}"></option>
            </select>
        </div>

        <div class="field">
            <label>备注</label>
            <input type="text" placeholder="请输入备注" name="beizhu" required th:value="*{beizhu}">
        </div>

        <div style="display: flex;justify-content: center;align-items: center;margin-top: 10px;">
            <button class="ui  submit blue button" style="width:400px;" type="submit">添加账单</button>
        </div>
    </form>
    <div style="display: flex;justify-content: center;align-items: center;margin-top: 10px;">
        <button class="ui submit red button" onclick="reloadPage();" style="width:400px;">重置</button>
    </div>
</div>
<script>
    $('.ui.radio.checkbox')
        .checkbox()
    ;
</script>
</body>
</html>